@import 'common';

@keyframes rubberBand {
  from {
    transform: scale3d(1, 1, 1);
  }

  6% {
    transform: scale3d(1.25, 0.75, 1);
  }

  8% {
    transform: scale3d(0.75, 1.25, 1);
  }

  10% {
    transform: scale3d(1.15, 0.85, 1);
  }

  13% {
    transform: scale3d(0.95, 1.05, 1);
  }

  15% {
    transform: scale3d(1.05, 0.95, 1);
  }

  20% {
    transform: scale3d(1, 1, 1);
  }
}

.gamebook {
  @extend %flex-column;

  grid-area: tools;
  justify-content: flex-end;

  .comment {
    @extend %flex-column, %box-shadow;

    font-size: 1.1em;
    background: $c-bg-box;
    border-radius: 1rem;
    position: relative;

    /* fixes firefox overflow when comment is long https://stackoverflow.com/questions/28636832/firefox-overflow-y-not-working-with-nested-flexbox */
    min-height: 0;

    @if $theme-dark {
      border: 1px solid $c-font-dimmer;
    }

    &::after {
      position: absolute;
      content: '';
      bottom: -9px;
      right: 20%;
      width: 15px;
      height: 15px;
      background: $c-bg-box;
      border-right: 1px solid $c-font-dimmer;
      border-bottom: 1.5px solid $c-font-dimmer;
      transform: skew(45deg) rotate(45deg);
      z-index: 1;
    }

    &.hinted::after {
      background: $c-primary;
    }

    .content {
      z-index: 2;
      overflow-y: auto;
      padding: 1em;
      min-height: 2.5em;
    }

    button {
      @extend %button-none;

      text-align: start;

      &.hint {
        padding: 0.8em 1em;
        color: $c-primary;
        font-size: 1rem;
      }

      div.hint {
        padding: 0.8em 1em;
        background: $c-primary;
        color: $c-primary-over;
        border-radius: 0 0 1rem 1rem;
        cursor: pointer;
        font-size: 0.9em;
        z-index: 2;
      }
    }
  }

  .floor {
    margin-top: 1em;
    flex: 0 0 8rem;
    display: flex;
  }

  .mascot {
    flex: 0 0 8rem;
    margin-left: 1em;
  }

  .feedback {
    @extend %flex-column, %box-radius, %button-none;

    flex: 1 1 100%;
    height: 8rem;
    text-align: center;
    justify-content: center;

    &.info {
      font-size: 1.6em;
    }

    &.good.init {
      visibility: hidden;
    }

    &.act {
      @extend %box-neat;

      font-size: 2em;
      color: #fff;
      cursor: pointer;
      opacity: 0.85;

      @include transition;

      &:hover {
        opacity: 1;
      }

      &.com span {
        animation: rubberBand 7s infinite;
      }
    }

    &.play {
      font-size: 0.8em;
      text-align: left;
    }

    &.play strong {
      font-size: 1.5em;
    }

    &.play > div {
      display: flex;
      align-items: center;
      margin: 0 10px;
    }

    &.play .no-square {
      flex: 0 0 64px;
      height: 64px;
      margin-right: 10px;
    }

    .instruction > * {
      display: block;
    }

    .is3d &.play div.no-square {
      height: 82px;
    }

    &.play piece {
      position: inherit;
      display: block;
      width: 100%;
      height: 100%;
    }

    &.bad {
      background: #dc322f;
    }

    &.good {
      background: #639b24 !important;
      color: #fff;
    }

    &.end {
      flex-flow: row;
      font-size: 0.8em;

      button {
        @extend %flex-column, %button-none;

        flex: 1 1 100%;
        background: mix($c-primary, $c-bg-box, 80%);
        color: $c-primary-over;
        font-size: 1.2em;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 0.5em;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        line-height: 1.2em;

        @include transition;

        &::before {
          font-size: 2.2em;
          margin: 0.5em 0;
        }

        &:first-child {
          @extend %box-radius-left;
        }

        &:last-child {
          @extend %box-radius-right;
        }

        &:hover {
          background: $c-primary;
        }
      }
    }
  }
}

.gamebook-buttons {
  @extend %flex-center;

  justify-content: flex-end;

  .fbt {
    @extend %box-radius-top;

    padding: 0.2em 0.5em;
    margin-left: 0.7em;
  }
}
